<template>
  <div class="NewsPageBg">
    <div class="label">
      标题
      <div class="selectInput">
        <el-input v-model="queryParams.title" placeholder="请输入新闻标题" />
      </div>
    </div>
    <div class="ClickBtnRow">
      <div class="AddBtn">
        <el-button type="primary" @click="addNewsClick">添加</el-button>
      </div>
      <div>
        <el-button type="primary" @click="getListPage">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="ListBg">
      <el-table :data="state.list" style="width: 100%">
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="update_date" label="创建时间" align="center" />
        <el-table-column label="操作" align="center" min-width="40" fixed="right">
          <template #default="{row}">
            <el-button link type="primary" @click="openPage(row)">查看</el-button>
            <el-button link type="primary" @click="deleteRow(row)">删除</el-button>
            <el-button link type="primary" @click="UpdataRow(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :total="state.total"
        v-model:page="queryParams.page"
        v-model:limit="queryParams.limit"
        @pagination="getListPage"
      />
    </div>

    <!-- 新增 -->
    <ElDrawer v-model="AddDrawer" :z-index="2000" direction="ltr" size="60%">
      <div class="label" style="width: 700px; ">
        分类
        <div class="selectInput" style="width: 620px;">
          <!-- <el-input v-model="Params.theme" placeholder="请输入新闻分类" /> -->
           <el-select v-model="Params.theme" class="m-2" placeholder="请选择新闻分类"  >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
        </div>
      </div>
      <div class="label" style="width: 700px; ">
        标题
        <div class="selectInput" style="width: 620px;">
          <el-input v-model="Params.title" placeholder="请输入新闻标题" />
        </div>
      </div>
      <div class="label" style="width: 700px; ">
        简介
        <div class="selectInput" style="width: 620px;">
          <el-input v-model="Params.introduction" placeholder="请输入新闻简介" />
        </div>
      </div>
      <div class="label" style="width: 700px; ">
        发布时间
        <div class="selectInput" style="width: 620px;">
          <el-date-picker v-model="Params.update_date" type="date" placeholder="选择日期" />
        </div>
      </div>
      <div class="label" style="width: 700px; justify-content: start;">
        封面图片
        <div class="selectInput" style="width: 620px;padding: 10px;">
          <el-upload
            v-model:file-list="introduction_banner1"
            action="https://xdcmt.com/oss/upload"
            :headers="Headers"
            :multiple="false"
            :data="UploadData"
            list-type="picture-card"
            :on-preview="introduction_handlePictureCardPreview"
            :on-success="introduction_handlePicturesSuccess"
            :on-remove="introduction_handleRemove"
          >
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible0">
            <img w-full :src="dialogImageUrl0" alt="Preview Image" />
          </el-dialog>
        </div>
      </div>
      <div class="label" style="width: 700px; ">
        <span class="text-16px font-700">新闻内容</span>
      </div>
      <div class="wangEditor">
        <WangEditor
          class="WangEditor"
          @select="getRich"
          ref="childrenRef"
          :editValue="AddEditValue"
        />
      </div>
      <template #footer>
        <el-button @click="sumbitClick" type="primary">提 交</el-button>
        <el-button @click="CloseDrawer">关 闭</el-button>
      </template>
    </ElDrawer>

    <!-- 查看 -->
    <ElDrawer v-model="drawer" :z-index="2000" direction="ltr" size="60%">
      <div class="label" style="width: 700px; ">
        标题
        <div class="selectInput" style="width: 620px;">
          <el-input v-model="title" placeholder="请输入新闻标题" />
        </div>
      </div>
      <div class="label" style="width: 700px; ">
        简介
        <div class="selectInput" style="width: 620px;">
          <el-input v-model="introduction" placeholder="请输入新闻简介" />
        </div>
      </div>
      <div class="label" style="width: 700px; ">
        发布时间
        <div class="selectInput" style="width: 620px;">
          <el-date-picker v-model="update_date" type="date" placeholder="选择日期" />
        </div>
      </div>
      <div class="label" style="width: 700px; justify-content: start;">
        封面图片
        <div class="selectInput" style="width: 620px;padding: 10px;">
          <el-image style="width: 120px; height: 120px" :src="introduction_banner" :fit="fit" />
        </div>
      </div>

      <div class="label" style="width: 700px; ">
        <span class="text-16px font-700">新闻内容</span>
      </div>

      <div class="wangEditor">
        <WangEditor class="WangEditor" @select="getRich" ref="childrenRef" :editValue="editValue" />
      </div>
    </ElDrawer>
  </div>
</template>

<script setup>
  import { getNewsList,addNews,deleteNews,updateNews } from "@/api/news/index";
  import { ElMessage } from 'element-plus'
  import UploadFile from "element-plus";
  import { getToken } from "@/utils/auth";

   import WangEditor from '@/components/WangEditor/index.vue'


// import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
// 获取文件上传token
const hasToken = getToken();
const Headers = {
  Authorization: hasToken ? hasToken : "",
};

const AddOrModify = ref(false);

const state = reactive({
  total: 0,
  list: [],
});

const NewsTitle = ref("");
const introduction_banner = ref("");

// 新增抽屉
const AddDrawer = ref(false);

const introduction_banner1 = ref([]);

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const ClickId = ref(0);

const drawerID = ref(0);

const editValue = ref("");

const AddEditValue = ref("");

const title = ref("");

const introduction = ref("");

const update_date = ref("");

const drawer = ref(false);

// 图片上传请求参数
const UploadData = {
  key: "firstPage",
  Bucket: "images",
};

const Params = ref({
  title: "",
  content: "",
  update_date: "",
  introduction: "",
  ImageUrl: "",
  theme:''
});

// 新增新闻按钮
const addNewsClick = () => {
  AddDrawer.value = true;
  drawerID.value = 1;
  AddOrModify.value = true;
  Params.value.title = "";
  Params.value.ImageUrl = "";
  Params.value.content = "";
  Params.value.introduction = "";
  Params.value.update_date = "";
  Params.value.theme = ''
  ruleForm.content = "";
  introduction_banner1.value = [];
};

const options = [
  {
    value: '公司新闻',
    label: '公司新闻',
  },
  {
    value: '行业新闻',
    label: '行业新闻',
  },
  {
    value: '常见问题',
    label: '常见问题',
  } 
]

const queryParams = ref({
  limit: 10,
  page: 1,
  title: "",
  total: 100,
  theme:''
});

// 打开查看详情抽屉
const openPage = (row) => {
  drawer.value = true;
  console.log(row);

  title.value = row.title;
  introduction.value = row.introduction;
  update_date.value = row.update_date;
  introduction_banner.value = row.file;
  editValue.value = row.content;
};

const props = defineProps({
  // 父页面传递的数据
  dataRow: {
    type: Object,
    default: () => {
      return {
        title: "",
        languageType: 1,
        contentType: 1,
        content: "",
        remark: null,
      };
    },
  },
});

const ruleFormRef = ref();
const ruleForm = reactive({
  content: "",
});

watch(
  props,
  (newUser, oldUser) => {
    if (props.dataRow && props.dataRow.id) {
      // 富文本回显
      ruleForm.content = props.dataRow.content;
      editValue.value = ruleForm.content;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

//当编辑器的内容更新时，获取该值
const getRich = function (value) {
  ruleForm.content = value;
};
defineExpose({
  ruleForm,
});

// 提交保存
const sumbitClick = () => {
  Params.value.content = ruleForm.content;

  if (AddOrModify.value) {
    const addParams = {
      title: Params.value.title,
      introduction: Params.value.introduction,
      content: Params.value.content,
      file: Params.value.ImageUrl,
      theme:Params.value.theme 
    };

    addNews(addParams).then((res) => {
      console.log(res);
      if (res.code == 20000) {
        ElMessage({
          message: '新增成功',
          type: 'success',
        })
        AddDrawer.value = false;
        Params.value.title = "";
        Params.value.ImageUrl = "";
        Params.value.content = "";
        Params.value.introduction = "";
        Params.value.update_date = "";
        ruleForm.content = "";
        introduction_banner1.value = [];
        getListPage();
      }
    });
  } else {
    console.log(Params.value.content);

    const UpdataParams = {
      id: ClickId.value,
      title: Params.value.title,
      introduction: Params.value.introduction,
      content: Params.value.content,
      file: Params.value.ImageUrl,
    };

    updateNews(UpdataParams).then((res) => {
      console.log(res);
      if (res.code == 20000) {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
        ClickId.value = 0;
        AddDrawer.value = false;
        Params.value.title = "";
        Params.value.ImageUrl = "";
        Params.value.content = "";
        Params.value.introduction = "";
        Params.value.update_date = "";
        ruleForm.content = "";
        introduction_banner1.value = [];
        getListPage();
      }
    });
  }
};

// 关闭抽屉
const CloseDrawer = () => {
  drawer.value = false;
  AddDrawer.value = false;
};

// 移除第一级轮播图片
const introduction_handleRemove = (file) => {
  console.log(file);
};

// 轮播第一级上传成功
const introduction_handlePicturesSuccess = (uploadFile) => {
  console.log(uploadFile,55555);
  Params.value.ImageUrl = uploadFile.data.url;
};
// 点击第一级轮播图片
const introduction_handlePictureCardPreview = (file) => {
  // dialogImageUrl0.value = file.url!;
  // dialogVisible0.value = true;
};

// 删除新闻
const deleteRow = (row) => {
  console.log(row);
  const deleteParams = {
    id: row.id,
  };
  deleteNews(deleteParams).then((res) => {
    if (res.code == 20000) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getListPage();
    }
  });
};

// 修改
const UpdataRow = (row) => {
  console.log(row);
  AddOrModify.value = false;
  AddDrawer.value = true;
  Params.value.title = row.title;
  Params.value.introduction = row.introduction;
  Params.value.update_date = row.update_date;

  let ImageName = row.file.split("firstPage/")[1].split(".")[0];

  let ImageBanner = {
    name: ImageName,
    url: row.file,
  };
  Params.value.ImageUrl = row.file;
  introduction_banner1.value.push(ImageBanner);
  ClickId.value = row.id;
  ruleForm.content = row.content;
  AddEditValue.value = ruleForm.content;
};

// 获取列表
const getListPage = async () => {
  const data = await getNewsList(queryParams.value);
  console.log(data);
  state.list = data.data;
  state.total = data.total;
};

const reset = () =>{
  queryParams.value = {
    limit: 10,
    page: 1,
    title: "",
    total: 100,
  };
  getListPage()
}

// 初始化
onMounted(() => {
  getListPage();
});
</script>

<style lang="scss" scoped>
.NewsPageBg {
  width: 100%;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  background-color: rgb(250, 250, 250);
  .label {
    display: flex;
    width: 320px;
    align-items: center;
    margin-top: 12px;
    margin-left: 12px;
    justify-content: space-between;
    .selectInput {
      width: 280px;
    }
  }

  .wangEditor {
    width: 98%;
  }

  .ClickBtnRow {
    width: 98%;
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .ListBg {
    width: 98%;
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    height: 630px;
  }
}
</style>